﻿@page "/tests/elements";
<Row>
    <Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>BADGE</CardTitle>
            </CardHeader>
            <CardBody>
                <Badge Color="Color.Primary">Primary</Badge>
                <Badge Color="Color.Secondary">Secondary</Badge>
                <Badge Color="Color.Success">Success</Badge>
                <Badge Color="Color.Info">Info</Badge>
                <Badge Color="Color.Warning">Warning</Badge>
                <Badge Color="Color.Danger">Danger</Badge>
                <Badge Color="Color.Info">Info</Badge>
                <Badge Color="Color.Light">Light</Badge>
                <Badge Color="Color.Dark">Dark</Badge>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>PILL BADGE</CardTitle>
            </CardHeader>
            <CardBody>
                <Badge Color="Color.Primary" IsPill="true">Primary</Badge>
                <Badge Color="Color.Secondary" IsPill="true">Secondary</Badge>
                <Badge Color="Color.Success" IsPill="true">Success</Badge>
                <Badge Color="Color.Info" IsPill="true">Info</Badge>
                <Badge Color="Color.Warning" IsPill="true">Warning</Badge>
                <Badge Color="Color.Danger" IsPill="true">Danger</Badge>
                <Badge Color="Color.Info" IsPill="true">Info</Badge>
                <Badge Color="Color.Light" IsPill="true">Light</Badge>
                <Badge Color="Color.Dark" IsPill="true">Dark</Badge>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>PAGINATION</CardTitle>
            </CardHeader>
            <CardBody>
                <Pagination>
                    <PaginationItem>
                        <PaginationLink>
                            <span aria-hidden="true">«</span>
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                        <PaginationLink>
                            1
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem IsActive="true">
                        <PaginationLink>
                            2
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                        <PaginationLink>
                            3
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                        <PaginationLink>
                            4
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                        <PaginationLink>
                            5
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                        <PaginationLink>
                            <span aria-hidden="true">»</span>
                        </PaginationLink>
                    </PaginationItem>
                </Pagination>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile">
        <Card>
            <CardHeader>
                <CardTitle>PAGINATION SIZING</CardTitle>
            </CardHeader>
            <CardBody>
                <Pagination Size="Size.Large">
                    <PaginationItem>
                        <PaginationLink>
                            <span aria-hidden="true">«</span>
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                        <PaginationLink>
                            1
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                        <PaginationLink>
                            2
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                        <PaginationLink>
                            3
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem IsActive="true">
                        <PaginationLink>
                            4
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                        <PaginationLink>
                            5
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                        <PaginationLink>
                            <span aria-hidden="true">»</span>
                        </PaginationLink>
                    </PaginationItem>
                </Pagination>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>BREADCRUMBS</CardTitle>
            </CardHeader>
            <CardBody>
                <Breadcrumb>
                    <BreadcrumbItem IsActive="true">
                        <BreadcrumbLink To="#">Home</BreadcrumbLink>
                    </BreadcrumbItem>
                </Breadcrumb>
                <Breadcrumb>
                    <BreadcrumbItem>
                        <BreadcrumbLink To="#">Home</BreadcrumbLink>
                    </BreadcrumbItem>
                    <BreadcrumbItem IsActive="true">
                        <BreadcrumbLink To="#">Library</BreadcrumbLink>
                    </BreadcrumbItem>
                </Breadcrumb>
                <Breadcrumb>
                    <BreadcrumbItem>
                        <BreadcrumbLink To="#">Home</BreadcrumbLink>
                    </BreadcrumbItem>
                    <BreadcrumbItem>
                        <BreadcrumbLink To="#">Library</BreadcrumbLink>
                    </BreadcrumbItem>
                    <BreadcrumbItem IsActive="true">
                        <BreadcrumbLink To="#">Data</BreadcrumbLink>
                    </BreadcrumbItem>
                </Breadcrumb>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>SNACKBAR</CardTitle>
            </CardHeader>
            <CardBody>
                <SimpleButton Clicked="@(()=>snackbar.Show())">Snackbar</SimpleButton>
                <SimpleButton Clicked="@(()=>snackbarAction.Show())">Snackbar With Action</SimpleButton>
                <SimpleButton Clicked="@(()=>snackbarMultiline.Show())">Multiline Snackbar</SimpleButton>
                <SimpleButton Clicked="@(()=>snackbarLeft.Show())">Left-Aligned Snackbar</SimpleButton>
                <SimpleButton Clicked="@(()=>snackbarRight.Show())">Right-Aligned Snackbar</SimpleButton>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>ALERT</CardTitle>
            </CardHeader>
            <CardBody>
                <Alert Color="Color.Success" IsShow="true">
                    <strong>Well done!</strong> You successfully read this important alert message.
                </Alert>
                <Alert Color="Color.Info" IsShow="true">
                    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
                </Alert>
                <Alert Color="Color.Warning" IsShow="true">
                    <strong> Warning!</strong> Better check yourself, you're not looking too good.
                </Alert>
                <Alert Color="Color.Danger" IsShow="true">
                    <strong>Oh snap!</strong> Change a few things up and try submitting again.
                </Alert>
                <Alert Color="Color.Success" IsShow="true">
                    <Heading Size="HeadingSize.Is4" TextColor="TextColor.Success">Big one!</Heading>
                    <p>
                        <strong>Well done!</strong> You successfully read this important alert message.
                    </p>
                    <p>
                        <SimpleButton Color="Color.Success">Wanna do this</SimpleButton>
                        <SimpleButton Color="Color.Light">Or do this</SimpleButton>
                    </p>
                </Alert>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile">
        <Card>
            <CardHeader>
                <CardTitle>DISMISABLE ALERT</CardTitle>
            </CardHeader>
            <CardBody>
                <Alert Color="Color.Success" IsShow="true" IsDismisable="true">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. <strong>Alert Link.</strong>
                    <CloseButton />
                </Alert>
                <Alert Color="Color.Info" IsShow="true" IsDismisable="true">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. <strong>Alert Link.</strong>
                    <CloseButton />
                </Alert>
                <Alert Color="Color.Warning" IsShow="true" IsDismisable="true">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. <strong>Alert Link.</strong>
                    <CloseButton />
                </Alert>
                <Alert Color="Color.Danger" IsShow="true" IsDismisable="true">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. <strong>Alert Link.</strong>
                    <CloseButton />
                </Alert>
                <Alert Color="Color.Info" IsShow="true" IsDismisable="true">
                    <Heading Size="HeadingSize.Is4" TextColor="TextColor.Success">
                        Big one!
                        <CloseButton />
                    </Heading>
                    <Paragraph>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
                    </Paragraph>
                    <Paragraph>
                        <SimpleButton Color="Color.Info">Wanna do this</SimpleButton>
                        <SimpleButton Color="Color.Light">Or do this</SimpleButton>
                    </Paragraph>
                </Alert>
            </CardBody>
        </Card>
    </Column>
</Row>
<Snackbar @ref="snackbar" @ref:suppressField>
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
</Snackbar>
<Snackbar @ref="snackbarAction" @ref:suppressField>
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
    <SnackbarAction Clicked="@(()=>snackbarAction.Hide())">ACTION</SnackbarAction>
</Snackbar>
<Snackbar @ref="snackbarMultiline" @ref:suppressField IsMultiline="true">
    <SnackbarBody>
        When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy’. They told me I didn’t understand the assignment, and I told them they didn’t understand life. –John Lennon
    </SnackbarBody>
    <SnackbarAction Clicked="@(()=>snackbarMultiline.Hide())">ACTION</SnackbarAction>
</Snackbar>
<Snackbar @ref="snackbarLeft" @ref:suppressField Location="SnackbarLocation.Left">
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
</Snackbar>
<Snackbar @ref="snackbarRight" @ref:suppressField Location="SnackbarLocation.Right">
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
</Snackbar>
@code{
    Snackbar snackbar;
    Snackbar snackbarAction;
    Snackbar snackbarMultiline;
    Snackbar snackbarLeft;
    Snackbar snackbarRight;
}